<template>
    <div class="user">
        <commonUserinfo :userInfoData="{userItemIndex:itemIndex,userLeftHeight:userLeftHeight,$parent:$parent}">
            <div id="applyInfo" class="user_main_right f_left text_center" ref="userRightH">
                <div class="user_userInfo apply_info color666">
                    <!-- <div class="user_right_tip">
                        温馨提示：最多可加3条发票信息<br>
                    </div> -->
                    <div v-if="showLists" style="margin: 30px;" class="invoice_create_btns">
                        
                        <div style="color: #FF0000;margin: 20px;text-align: center;">
                            发票上需要提供银行信息及地址的请开企业专票
                        </div>
                        <el-table :data="invoiceLst" class="table" :show-header="true" :border="true" :fit="true"
                            highlight-current-row>
                            <el-table-column align="center" prop="invoiceTitle" label="名 称" :show-overflow-tooltip="true">
                            </el-table-column>
                            <el-table-column align="center" prop="taxRegistryNo" label="纳税人识别号" :show-overflow-tooltip="true">
                            </el-table-column>
                            <el-table-column align="center" prop="ObAndAn" label="开户行及账号" :show-overflow-tooltip="true">
                            </el-table-column>
                            <el-table-column align="center" prop="AddAndTel" label="地 址、电 话" :show-overflow-tooltip="true">
                            </el-table-column>
                            <el-table-column align="center" prop="receivingInformation" label="收货地址及号码"
                                :show-overflow-tooltip="true">
                            </el-table-column>
                            <el-table-column align="center" prop="" label="操作" style="width: 3.75rem;">
                                <template slot-scope="scope">
                                    <a style="color: #ff0000;" class="hand" @click="deleteInvoice(scope.row.id)" title="删除"><i
                                            class="el-icon-delete"></i></a>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div style="justify-content: center;margin-top: 20px;display: flex;">
                            <a class="apply_info_btn" @click="showLists=false">新增</a>
                        </div>
                    </div>
                    <div v-else>
                        <invoiceCreate @closeDialog="createInvoices"></invoiceCreate>
                    </div>
                </div>
            </div>
        </commonUserinfo>
    </div>
</template>

<script>
    var _this;
    import commonUserinfo from '@/components/c_userinfo.vue'
    import invoiceCreate from '@/components/invoice_create.vue'
    export default {
        name: "ticketManage",
        data: function() {
            return {
                showLists: true,
                itemIndex: 4,
                userLeftHeight: '',
                invoiceLst: []
            }
        },
        beforeCreate: function() {
            _this = this;
        },
        mounted: function() {
            this.getInvoiceTemp();
        },
        methods: {
            getInvoiceTemp: function() {
                _this.invoiceLst = [];
                this.common.post(this.api.getInvoiceTemp, {}, function(res) {
                    if (res.resultMap != undefined && res.resultMap.length > 0) {
                        let myInvoiceLst = res.resultMap;
                        myInvoiceLst.map((item, index)=>{
                            // 发票
                            item.ObAndAn = `${item.invoiceBank != undefined ? item.invoiceBank : "" } ${item.invoiceAccount != undefined ? item.invoiceAccount: ""}`
                            item.AddAndTel = `${item.invoiceAddress != undefined ? item.invoiceAddress : ""} ${item.invoicePhone != undefined ? item.invoicePhone : ""}`
                            // 收货
                            item.receivingInformation = `${item.mailingAddress == undefined ? "" : item.mailingAddress}  ${item.mailingConsignee == undefined ? "" : item.mailingConsignee}  ${item.mailingConsigneephone == undefined ? "" : item.mailingConsigneephone}`
                            return item
                        })
                        _this.invoiceLst = myInvoiceLst;
                    } else {
                        _this.$message.error("当前暂无发票信息,请添加！");
                    }
                });
            },
            deleteInvoice: function(id) {
                this.common.post(this.api.delInvoiceTemp, {
                    id: id
                }, function(res) {
                    _this.$message.success('删除成功！');
                    _this.getInvoiceTemp();
                }, function(error) {
                    _this.$message.error(error.resultMsg);
                });
            },
            createInvoices: function() {
                this.showLists = true;
                this.getInvoiceTemp();
            }
        },
        components: {
            commonUserinfo,
            invoiceCreate
        }
    }
</script>

<style>

</style>
